<html>
<head>
<title>hc_access_account</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' type='text/css'
    href='../../extjs-4.1.0/resources/css/ext-all-gray.css' />
<script type='text/javascript' src='../../extjs-4.1.0/ext-all.js'></script>
<script type="text/javascript" src="../../js/head.js"></script>
<script type="text/javascript" src="../../js/ux/data/PagingMemoryProxy.js"></script>
<script type="text/javascript" src="../../js/ux/form/SearchField.js"></script>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="../../js/i18n.js"></script>
<script type="text/javascript" src="../systemmanagement/common.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/basicUtil.js"></script>

<script type="text/javascript">

//去掉字符串左边的空格 
function ltrim(s) {
    if (s == null) return "";
    var whitespace = new String(" \t\n\r");
    var str = new String(s);
    if (whitespace.indexOf(str.charAt(0)) != -1) {
        var j = 0, i = str.length;
        while (j < i && whitespace.indexOf(str.charAt(j)) != -1) {
            j++;
        }
        str = str.substring(j, i);
    }
    return str;
}

//去掉字符串右边的空格 
function rtrim(s) {
    if (s == null) return "";
    var whitespace = new String(" \t\n\r");
    var str = new String(s);
    if (whitespace.indexOf(str.charAt(str.length - 1)) != -1) {
        var i = str.length - 1;
        while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1) {
            i--;
        }
        str = str.substring(0, i + 1);
    }
    return str;
}

function memoryRender(value) {
	return value + "M";
}

function diskRender(value) {
	return value + "G";
}

function renderPage(){
    function vd(text){
        if(ltrim(rtrim(text)) == '') {
            return i18n._('cannotBeNull');
        } else {
            return true;
        }
    };
    
    
    function clickCancel() {
        announcementForm.getForm().reset();
        announcementWin.hide();
    }
    
    function clickSubmit() {
        var id = Ext.getCmp('id').getValue();
        var nameValue = Ext.getCmp('name').getValue();
        var osValue = Ext.getCmp('os').getValue();
        var memoryValue = Ext.getCmp('memory').getValue();
        var diskValue = Ext.getCmp('disk').getValue();
        var cpuValue = Ext.getCmp('cpu').getValue();
        
        if(!announcementForm.form.isValid()) {
            return;
        }
        var progress=Ext.Ajax.request({
            url: path + '/../ops/vrouterTemplateAction!editVrouterTemplate.action',
            method:'POST',
            params:{
                'vrouterTemplateVO.id': id,
                'vrouterTemplateVO.name': nameValue,
                'vrouterTemplateVO.cpuCore': cpuValue,
                'vrouterTemplateVO.diskCapacity': diskValue,
                'vrouterTemplateVO.memSize': memoryValue,
                'vrouterTemplateVO.osId': osValue
            },
            success:function(form,action){
            	var obj = Ext.decode(form.responseText);
                if(obj==null || obj.success==null){
                    alertOKShow(i18n._('errorNotice'), i18n._('returnNull'));
                    return;
                }
                if(!obj.success){
                    alertOKShow(i18n._('errorNotice'), obj.resultMsg);
                } else if(obj.resultObject == 'nameExisted') {
                    alertOKShow(i18n._('errorNotice'), i18n._('configNameExist'));
                } else {
                    var msg = i18n._('Operating')+i18n._('Successful');
                    alertOKShow(i18n._('notice'), msg, reLoadData(announcementStore));
                    announcementForm.getForm().reset();
                    announcementWin.hide();
                }
                return;
            },   
            failure:function(form,action){
                alertOKShow(i18n._('errorNotice'), i18n._('operateFail'));
            }
        });
    }
    
    Ext.define('ServiceItem1', {
        extend: 'Ext.data.Model',
        fields: [
        {name: 'id',  type: 'int'},
        {name: 'serviceType',  type: 'int'},
        {name: 'createDate',  type: 'date'},
        {name: 'updateDate',  type: 'date'},
        {name: 'price',  type: 'float'},
        {name: 'size',  type: 'int'},
        {name: 'description',  type: 'string'},
        {name: 'name',  type: 'string'},
        {name: 'model',  type: 'string'},
        {name: 'frequency',  type: 'float'},
        {name: 'coreNum',  type: 'int'},
        {name: 'arch',  type: 'string'},
        {name: 'vendor',  type: 'string'},
        {name: 'capacity',  type: 'int'},
        {name: 'type',  type: 'string'},
        {name: 'bandWidth',  type: 'int'},
        {name: 'version',  type: 'string'},
        {name: 'language',  type: 'string'},
        {name: 'imageSize',  type: 'string'},
        {name: 'platform',  type: 'string'},
        {name: 'family',  type: 'string'},
        {name: 'times',  type: 'int'}
        ]
    });
    
    Ext.define('listItemStore',{
        extend:'Ext.data.Store',
        autoLoad:false,
            remoteSort:true,
            proxy:{
                model: 'ServiceItem1',
                type: 'ajax',
                url : path + '/../sc/serviceItem!listServiceItem.action',
                reader: {
                    type: 'json',
                    root:'resultObject',
                    totalProperty: 'resultObject.totalCount'
                }
            }
    });
    
    var v_osStore=Ext.create('listItemStore');
    v_osStore.getProxy().setExtraParam('serviceType',9);
    v_osStore.load();
    
    var v_os=Ext.create('Ext.form.ComboBox',{
        height: 0,
        width: 300,
        id: 'os',
        fieldLabel: i18n._('system'),
        store: v_osStore,
        displayField: 'name',
        emptyText:i18n._('Please Select'),
        editable:false,
        allowBlank:false,
        valueField: 'id',
        forceSelection:true
    });
    
    Ext.define('cpuModel', {
        extend: 'Ext.data.Model',
        fields: [
            {type: 'string', name: 'key'},
            {type: 'string', name: 'value'}
        ]
    });
    
    var cpuData = [{"key":"1","value":"1"}];
    var cpuStore = Ext.create('Ext.data.Store', {
        autoDestroy: true,
        model: 'cpuModel',
        data: cpuData
    });
    
    var cpuCombo = Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: i18n._('CPU'),
        id: 'cpu',
        displayField: 'value',
        width: 300,
        store: cpuStore,
        emptyText:i18n._('Please Select'),
        editable:false,
        allowBlank:false,
        queryMode: 'local',
        typeAhead: true
    });
    
    var memorySlider= Ext.create('Ext.slider.Single', {
        id:'memory',
        fieldLabel:i18n._('Memory'),
        width: 260,
        increment: 1,
        minValue: 128,
        maxValue: 128,
        value:128,
        tipText: function(thumb){
            return Ext.String.format('<b>{0}G</b>', thumb.value);
            },
        listeners:{
            'change':{
            fn:function(){
                var memory_value=  Ext.getCmp('memory1').getValue();
                Ext.getCmp('memoryValue').setValue(memory_value+'G');
                    }
                }
            }   
    });
    
    var memoryPanel= Ext.create('Ext.panel.Panel',{
        xtype:'panel',
        height:30,
        width:290,
        border:false,
        layout:'hbox',
        items:[memorySlider,{
               xtype: 'displayfield',
               id:'memoryValue',
               value:'128M'
        }]
     });
    
    var diskSlider= Ext.create('Ext.slider.Single', {
        id:'disk',
        fieldLabel:i18n._('Disk'),
        width: 260,
        increment: 1,
        minValue: 1,
        maxValue: 1,
        value:1,
        tipText: function(thumb){
            return Ext.String.format('<b>{0}G</b>', thumb.value);
            },
            listeners:{
                'change':{
                fn:function(){
                    var disk_value=  Ext.getCmp('disk').getValue();
                    Ext.getCmp('diskValue').setValue(disk_value+'G');
                }
            }
        }
      });    
    
      
      var diskPanel = Ext.create('Ext.panel.Panel',{
            xtype:'panel',
            height:30,
            width:290,
            border:false,
            layout:'hbox',
           items:[diskSlider,{
                xtype: 'displayfield',
                id:'diskValue',
                value:'1G'
         }]
      });
    
    var announcementForm=Ext.create('Ext.form.FormPanel', {
        width: '400',
        border:false,
        bodyPadding : 10,
        autoScroll:true,
        fieldDefaults : {
            labelAlign : 'right',
            labelWidth : 60
        },  
        items: [
            {
                fieldLabel:i18n._('configName'),
                name:"name",
                id:'name',
                xtype:"textfield",
                width:290,
                validator : vd,
                maxLength:50
            }, v_os
            , cpuCombo
            , memoryPanel
            , diskPanel
            ,{
                xtype:'textfield',
                id:'id',
                hidden: true,
                hideLabel: true
            }
        ],
        buttons:[
            {text:i18n._('OK'), handler:clickSubmit},
            {text:i18n._('Cancel'), handler:clickCancel}
        ]
        
    });
    
    var announcementWin = Ext.create('Ext.window.Window', {
        width : 400,
        height : 240,
        closable : false,
        constrain : true,
        modal : true,
        tools : [ {
            type : 'close',
            handler : clickCancel
        }],
        layout : 'fit',
        defaults : {
            split : false
        },
        items : [announcementForm]
    });
    //分页序号
    Ext.grid.PageRowNumberer = Ext.extend(Ext.grid.RowNumberer, { 
        baseCls:Ext.baseCSSPrefix + 'column-header ' + Ext.baseCSSPrefix + 'unselectable',
        cls:Ext.baseCSSPrefix + 'row-numberer',
        tdCls:Ext.baseCSSPrefix+"grid-cell-special",
        renderer:function(value, cellmeta, record, rowIndex, columnIndex, store){   
            return (store.currentPage - 1) * store.pageSize + rowIndex + 1;  
        }       
    });
    //遮罩层
    var v_mask = new Ext.LoadMask(Ext.getBody(), {
        msg : i18n._('please wait'),
        removeMask : true           
    });
    Ext.define('accessAccountModel', {
        extend : 'Ext.data.Model',
        fields : ['id', 'version', 'cpuCore', 'diskCapacity', 'memSize', 'name', 'osId']
    });
    var announcementStore = Ext.create('Ext.data.Store', {
        model : 'accessAccountModel',
        autoLoad : true,//true
        pageSize : pageSize,//每页显示16条数据
        proxy : new Ext.data.proxy.Ajax({
            url : path + '/../ops/vrouterTemplateAction!pageVrouterTemplateList.action',
            reader : {
                type : 'json',
                root : 'resultObject.result',
                totalProperty : 'resultObject.totalCount'
            },
            listeners:{
                exception:function(reader, response, error, eOpts){
                    ajaxException(reader, response, error, eOpts );
                }
            }
        }), 
        listeners : {
            beforeload : function(store,operation, eOpts ){ 
                v_mask.show();
            },
            load : function(store, records, successful, eOpts ){
                v_mask.hide();
            }
        }
    });
    
    var accessAccountGrid=Ext.create('Ext.grid.Panel', {
        layout:'fit',                   
        store:announcementStore,
        simpleSelect:true,
        selModel: Ext.create('Ext.selection.RowModel'),
        columns: [
                    Ext.create('Ext.grid.PageRowNumberer',{flex : 0.1}),
                    { header: i18n._('configName'), dataIndex: 'name', sortable: false, flex:0.5}, 
                    { header: i18n._('system'),  dataIndex: 'version', sortable: false, flex:0.6}, 
                    { header: i18n._('CPU'),   dataIndex: 'cpuCore', sortable: false, flex:0.3}, 
                    { header: i18n._('Memory'),  dataIndex: 'memSize', sortable: false, flex:0.3,renderer: memoryRender},
                    { header: i18n._('Disk'),  dataIndex: 'diskCapacity', sortable: false, flex:0.3, renderer: diskRender}
        ],
        bbar: Ext.create('Ext.toolbar.Paging', {
              store:announcementStore,
              displayInfo: true,
              beforePageText:i18n._('beforePageText'),//"第"
              firstText: i18n._('firstText'),//"第一页"
              prevText: i18n._('prevText'),//"上一页"
              nextText: i18n._('nextText'),//"下一页"
              lastText: i18n._('lastText'),//"最后页"
              refreshText: i18n._('refreshText')//"刷新"
        }),             
        viewConfig: {
            stripeRows: true
        },                  
        dockedItems:[
        {
            xtype:'toolbar',
            cls: 'toolbarCSS',
            dock: 'top',            
            items:[         
                    {                                  
                        xtype : 'button',                                   
                        text: '<font id="addCustomerId" color="#ffffff" >' + i18n._('add') + '</font>',//发布公告
                        listeners: changeColor("addCustomerId"),
                        icon : '../../images/add_new.png',
                        handler:function(){
                            getSessionUser();
                            announcementWin.setTitle(i18n._('addVrouterConfig'));
                            announcementWin.show(); 
                        }                  
                    },
                    {                                  
                        xtype : 'button',                                   
                        text: '<font id="modifyAnnouncement" color="#ffffff" >' + i18n._('modify') + '</font>',//编辑公告
                        listeners: changeColor("modifyAnnouncement"),
                        icon : '../../images/edit_new.png',
                        handler:function(){
                            getSessionUser();
                            var rows = accessAccountGrid.getSelectionModel().getSelection();
                            if (rows.length < 1) {
                                alertOKShow(i18n._('Prompt'), i18n._('selectOne'));
                                return;
                            }
                            Ext.getCmp('id').setValue(rows[0].get('id'));
                            Ext.getCmp('name').setValue(rows[0].get('name'));
                            Ext.getCmp('os').setValue(rows[0].get('osId'));
                            Ext.getCmp('cpu').setValue(rows[0].get('cpuCore'));
                            Ext.getCmp('memory').setValue(rows[0].get('memSize'));
                            Ext.getCmp('disk').setValue(rows[0].get('diskCapacity'));
                            announcementWin.setTitle(i18n._('modifyVrouterConfig'));
                            announcementWin.show();         
                        }                  
                    },
                    {                                  
                        xtype : 'button',                                   
                        text: '<font id="delAnnouncement" color="#ffffff" >' + i18n._('delete') + '</font>',//发布公告
                        listeners: changeColor("delAnnouncement"),
                        icon : '../../images/delete.png',
                        handler:function(){ // 删除
                            getSessionUser();
                            var rows = accessAccountGrid.getSelectionModel().getSelection();
                            if (rows.length > 0) {
                                var id = rows[0].get('id');
                                Ext.MessageBox.show({                                 
                                    title: i18n._('notice'),
                                    msg:i18n._('Are you sure to delete'),
                                    buttons: Ext.MessageBox.YESNO,
                                    icon: Ext.MessageBox.QUESTION,
                                    fn:function(e){
                                        if(e=='yes'){
                                            Ext.Ajax.request({
                                                url: path + '/../ops/vrouterTemplateAction!deleteVrouterTemplate.action',
                                                method: 'POST',
                                                params:{
                                                    'vrouterTemplateVO.id':id
                                                },
                                                success: function (response) {
                                                    var result=Ext.JSON.decode(response.responseText);
                                                    if(result.success==true){　　　　　　　
                                                        var msg = i18n._('Operating')+i18n._('Successful');
                                                        alertOKShow(i18n._('notice'), msg, afterDelete(announcementStore));
                                                    }else{
                                                        alertOKShow(i18n._('notice'), result.resultMsg);
                                                    }
                                                }
                                            });
                                        }
                                    }
                                }); 
                            } else {
                                alertOKShow(i18n._('Prompt'), i18n._('selectOne'));
                            }       
                        }                  
                    }
                ]
        }]
    });
    
    Ext.create('Ext.Viewport',{
         layout:'border',
         width:'100%',                   
         items:[
             {
                 region:'center',
                 xtype:'panel',
                 id:'panel_one',
                 title:i18n._('ServiceCatalog_management')+'&nbsp;&nbsp;>&nbsp;&nbsp;'+i18n._('VRouterOS_management'),
                 width:'60%',
                 layout:'fit',
                 autoScroll:true,
                 items:[
                     {
                         xtype:'panel',
                         layout:'fit',
                         autoScroll:true,
                         items: accessAccountGrid
                     }
                 ]
             }
         ]//panel
     });
}
</script>
</head>
<body>
</body>
</html>